<template>
  <div>
    {{ t("title") }}
    {{ t("name") }}
    {{ t("status") }}
    <button @click="en">en</button>
    <button @click="zn">zn</button>
  </div>
  <!-- 请求天气 -->
  <el-button @click="get">g请求</el-button>
  <el-button @click="air">获取空气质量</el-button>
  <el-button @click="post(ctyu)">获取天气</el-button>
  <el-button @click="cter">获取城市id</el-button>
  <input type="text" v-model="id" @keyup.enter="post" :placeholder="ctid" />
  <input
    type="text"
    v-model="cteer"
    @keyup.enter="cter"
    placeholder="请输入城市"
  />
  <el-cascader
    placeholder="请选择地区"
    size="default"
    v-model="selectedOptions"
    :options="regionData"
    @change="cter"
  >
  </el-cascader>
  <div v-for="(item, index) in res1" :key="index">
    <el-button>
      {{ item.name }}
    </el-button>
    <el-button>{{ item.price }}</el-button>
  </div>
  <h4>温度</h4>
  <div v-for="(item, i) in tian" :key="i">
    <div>
      预报日期：{{ item.fxDate }}, 当天最高温度：{{ item.tempMax }},
      当天最低温度：{{ item.tempMin }}, 日出时间：{{ item.sunrise }},
      日落时间：{{ item.sunset }}, 月相名称：{{ item.moonPhase }}, 白天风向：{{
        item.windDirDay
      }}，风速：{{ item.windSpeedDay }}
    </div>
  </div>
  <h4>空气质量</h4>
  <div v-for="(item, a) in airr" :key="a">
    <div>
      日期：{{ item.fxDate }} 空气质量等级：{{ item.level }} 空气质量指数：{{
        item.aqi
      }}
      空气质量指数级别：{{ item.category }}
    </div>
  </div>
  <div>城市id：{{ ctid }}</div>
</template>

<script setup>
import { ref, reactive } from "vue";
import axios from "axios";
import { regionData } from "element-china-area-data";
import { useI18n } from "vue-i18n";
const { locale, t } = useI18n();

function en() {
  locale.value = "en";
}
function zn() {
  locale.value = "zh-cn";
}
function get() {
  axios
    .get("/api/login.json")
    .then((res) => {
      console.log(res);
      res1.value = res.data.prolist;
    })
    .catch((err) => {
      console.log(err);
    });
}
//查询城市天气
function post(ctyu) {
  axios
    .get("/v7/weather/3d", {
      params: {
        location: ctyu, //ctid.value
        key: "b3b5247ab7b44975a17dd0d2a7be98d9",
      },
    })
    .then((res) => {
      console.log(res);
      tian.value = res.data.daily;
      air(res.data.daily);
    })
    .catch((err) => {
      console.log(err);
    });
}
//查询城市坐标
function cter() {
  axios
    .get("/v2/city/lookup", {
      params: {
        location: selectedOptions.value[2], //cteer.value
        key: "b3b5247ab7b44975a17dd0d2a7be98d9",
      },
    })
    .then((res) => {
      console.log(res);
      ctid.value = res.data.location[0].id;
      post(res.data.location[0].id);
    })
    .catch((err) => {
      console.log(err);
    });
}
//空气质量
function air() {
  axios
    .get("/v7/air/5d", {
      params: {
        location: ctid.value,
        key: "b3b5247ab7b44975a17dd0d2a7be98d9",
      },
    })
    .then((res) => {
      console.log(res);
      airr.value = res.data.daily;
    })
    .catch((err) => {
      console.log(err);
    });
}
const selectedOptions = ref();
const cteer = ref(null);
const id = ref();
const ctid = ref(null);
const res1 = ref(null);
const tian = ref(null);
const airr = ref(null);
</script>

<style>
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
</style>
